<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="./static/css/styles.css" />
  <title>mediasoup basic functionality sample code</title>
  <script>
    window.localStorage.setItem('debug', '*');
  </script>

  <script src="./static/js/client-bundle.js"></script>
</head>

<body onload="Client.main()">

  <div id="local-control">
    <div id="join-control">
      <button id="join-button" onclick="Client.joinRoom()">
        join room
      </button>
      <span class="arrow"> &#x21E2; </span>
    </div>

    <div id="camera-control">
      <button id="send-camera" onclick="Client.sendCameraStreams()">
        send camera streams
      </button>
      <button id="stop-streams" onclick="Client.stopStreams()">
        stop streams
      </button>
      <span id="camera-info"></span>
      <button id="share-screen" onclick="Client.startScreenshare()">
        share screen
      </button>
      <div id="outgoing-cam-streams-ctrl">
        <div>
          <input id="local-cam-checkbox" type="checkbox" checked onchange="Client.changeCamPaused()"></input>
          <label id="local-cam-label">camera</label>
          <span id="camera-producer-stats" class="track-ctrl"></span>
        </div>
        <div>
          <input id="local-mic-checkbox" type="checkbox" checked onchange="Client.changeMicPaused()"></input>
          <label id="local-mic-label">mic</label></div>
        <div id="local-screen-pause-ctrl">
          <input id="local-screen-checkbox" type="checkbox" checked onchange="Client.changeScreenPaused()"></input>
          <label id="local-screen-label">screen</label>
          <span id="screen-producer-stats" class="track-ctrl"></span>
        </div>
        <div id="local-screen-audio-pause-ctrl">
          <input id="local-screen-audio-checkbox" type="checkbox" checked onchange="Client.changeScreenAudioPaused()"></input>
          <label id="local-screen-audio-label">screen audio</label>
          <span id="screen-audio-producer-stats" class="track-ctrl"></span>
        </div>
      </div>
    </div>

    <button id="leave-room" onclick="Client.leaveRoom()">
      leave room
    </button>

  </div>

  <div id="available-tracks"></div>

  <div id="remote-video"></div>

  <div id="remote-audio"></div>

</body>

</html>